<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>自定义组件-5[组件切换]</title>
		<script src="vue.js"></script>
	</head>

	<body>
		<div id="app">
			<a href="#" @click.prevent="flag?flag:flag=!flag">登录</a>
			<a href="#" @click.prevent="flag?flag=!flag:flag">注册</a>
			<login v-if="flag"></login>
			<reg v-else></reg>
		</div>
	</body>
	<script>
		//登陆组件
		Vue.component("login", {
			template: "<div>登陆界面</div>",
			//登陆账号和密码
		})
		//注册组件
		Vue.component("reg", {
			template: "<div>注册界面</div>"
			//账号，邮箱，密码，确认密码，手机号
		})
		var vm = new Vue({
			el: "#app",
			data: {
				flag: true,
			}
		})
	</script>

</html>